<template>
  <view class="container">
    <!-- 创建事件按钮 -->
    <view class="create-section">
      <custom-button
        type="primary"
        size="large"
        text="创建专属时刻"
        @click="showCreateModal = true"
      />
    </view>

    <!-- 事件日历 -->
    <view class="calendar-section">
      <view class="calendar-header">
        <text class="month-text">{{ currentMonthText }}</text>
        <view class="calendar-nav">
          <u-icon name="arrow-left" color="#666" size="24" @tap="prevMonth" />
          <u-icon name="arrow-right" color="#666" size="24" @tap="nextMonth" />
        </view>
      </view>
      
      <view class="calendar-grid">
        <view class="weekday" v-for="day in weekdays" :key="day">
          {{ day }}
        </view>
        <view
          v-for="date in calendarDates"
          :key="date.date"
          class="calendar-date"
          :class="{
            today: date.isToday,
            hasEvent: date.hasEvent,
            selected: date.date === selectedDate
          }"
          @tap="selectDate(date.date)"
        >
          <text class="date-text">{{ date.day }}</text>
          <view v-if="date.hasEvent" class="event-dot"></view>
        </view>
      </view>
    </view>

    <!-- 今日事件 -->
    <view class="events-section">
      <view class="section-header">
        <text class="section-title">{{ selectedDateText }}事件</text>
        <text class="event-count">{{ todayEvents.length }}个事件</text>
      </view>
      
      <view v-if="todayEvents.length > 0" class="events-list">
        <view
          v-for="event in todayEvents"
          :key="event.id"
          class="event-card"
          @tap="showEventDetail(event)"
        >
          <view class="event-time">
            <text class="time-text">{{ event.time }}</text>
          </view>
          <view class="event-content">
            <text class="event-title">{{ event.title }}</text>
            <text class="event-desc">{{ event.description }}</text>
          </view>
          <view class="event-status" :class="event.status">
            {{ getStatusText(event.status) }}
          </view>
        </view>
      </view>
      
      <view v-else class="empty-events">
        <u-empty
          mode="list"
          :text="`${selectedDateText}暂无事件`"
          icon="http://cdn.uviewui.com/uview/empty/list.png"
        />
      </view>
    </view>

    <!-- 即将到来的事件 -->
    <view class="upcoming-section">
      <view class="section-header">
        <text class="section-title">即将到来</text>
        <text class="section-more" @tap="showAllEvents">查看全部 ></text>
      </view>
      
      <view v-if="upcomingEvents.length > 0" class="upcoming-list">
        <view
          v-for="event in upcomingEvents.slice(0, 3)"
          :key="event.id"
          class="upcoming-card"
          @tap="showEventDetail(event)"
        >
          <view class="upcoming-date">
            <text class="date-day">{{ formatDay(event.date) }}</text>
            <text class="date-month">{{ formatMonth(event.date) }}</text>
          </view>
          <view class="upcoming-content">
            <text class="upcoming-title">{{ event.title }}</text>
            <text class="upcoming-time">{{ event.time }}</text>
          </view>
          <view class="upcoming-countdown">
            <text class="countdown-text">{{ getCountdown(event.date) }}</text>
          </view>
        </view>
      </view>
      
      <view v-else class="empty-upcoming">
        <u-empty
          mode="list"
          text="暂无即将到来的事件"
          icon="http://cdn.uviewui.com/uview/empty/list.png"
        />
      </view>
    </view>

    <!-- 创建事件弹窗 -->
    <u-popup v-model="showCreateModal" mode="center" border-radius="20">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">创建专属时刻</text>
          <u-icon name="close" color="#999" size="24" @tap="showCreateModal = false" />
        </view>
        
        <view class="modal-form">
          <u-form ref="eventForm" :model="newEvent">
            <u-form-item label="事件标题" prop="title">
              <u-input v-model="newEvent.title" placeholder="请输入事件标题" />
            </u-form-item>
            
            <u-form-item label="事件描述" prop="description">
              <u-textarea
                v-model="newEvent.description"
                placeholder="请输入事件描述"
                :maxlength="200"
                :auto-height="false"
                height="100"
              />
            </u-form-item>
            
            <u-form-item label="日期" prop="date">
              <u-input
                v-model="newEvent.date"
                type="select"
                placeholder="请选择日期"
                @tap="showDatePicker = true"
              />
            </u-form-item>
            
            <u-form-item label="时间" prop="time">
              <u-input
                v-model="newEvent.time"
                type="select"
                placeholder="请选择时间"
                @tap="showTimePicker = true"
              />
            </u-form-item>
            
            <u-form-item label="类型" prop="type">
              <u-radio-group v-model="newEvent.type">
                <u-radio name="date">约会</u-radio>
                <u-radio name="anniversary">纪念日</u-radio>
                <u-radio name="celebration">庆祝</u-radio>
                <u-radio name="other">其他</u-radio>
              </u-radio-group>
            </u-form-item>
          </u-form>
        </view>
        
        <view class="modal-actions">
          <custom-button
            type="secondary"
            text="取消"
            @click="showCreateModal = false"
          />
          <custom-button
            type="primary"
            text="创建"
            @click="createEvent"
          />
        </view>
      </view>
    </u-popup>

    <!-- 日期选择器 -->
    <u-picker
      v-model="showDatePicker"
      mode="time"
      :params="dateParams"
      @confirm="handleDateSelect"
    />

    <!-- 时间选择器 -->
    <u-picker
      v-model="showTimePicker"
      mode="time"
      :params="timeParams"
      @confirm="handleTimeSelect"
    />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 数据
const showCreateModal = ref(false)
const showDatePicker = ref(false)
const showTimePicker = ref(false)
const selectedDate = ref(getTodayDate())

const newEvent = ref({
  title: '',
  description: '',
  date: '',
  time: '',
  type: 'date'
})

const weekdays = ['日', '一', '二', '三', '四', '五', '六']

const dateParams = {
  year: true,
  month: true,
  day: true
}

const timeParams = {
  hour: true,
  minute: true
}

// 模拟事件数据
const events = ref([
  {
    id: 1,
    title: '浪漫晚餐',
    description: '在餐厅享用烛光晚餐',
    date: getTodayDate(),
    time: '19:00',
    type: 'date',
    status: 'upcoming'
  },
  {
    id: 2,
    title: '一周年纪念',
    description: '我们的一周年纪念日',
    date: getFutureDate(7),
    time: '20:00',
    type: 'anniversary',
    status: 'upcoming'
  },
  {
    id: 3,
    title: '生日庆祝',
    description: '为Ta准备生日惊喜',
    date: getFutureDate(15),
    time: '18:00',
    type: 'celebration',
    status: 'upcoming'
  }
])

// 计算属性
const currentMonthText = computed(() => {
  const date = new Date(selectedDate.value)
  return `${date.getFullYear()}年${date.getMonth() + 1}月`
})

const calendarDates = computed(() => {
  const dates = []
  const date = new Date(selectedDate.value)
  const year = date.getFullYear()
  const month = date.getMonth()
  
  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  
  // 填充前面的空白日期
  const startDay = firstDay.getDay()
  for (let i = 0; i < startDay; i++) {
    dates.push({ date: '', day: '' })
  }
  
  // 填充实际日期
  for (let day = 1; day <= lastDay.getDate(); day++) {
    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
    const isToday = dateStr === getTodayDate()
    const hasEvent = events.value.some(e => e.date === dateStr)
    
    dates.push({
      date: dateStr,
      day,
      isToday,
      hasEvent
    })
  }
  
  return dates
})

const selectedDateText = computed(() => {
  if (selectedDate.value === getTodayDate()) {
    return '今日'
  }
  return formatDate(selectedDate.value)
})

const todayEvents = computed(() => {
  return events.value.filter(e => e.date === selectedDate.value)
})

const upcomingEvents = computed(() => {
  const today = getTodayDate()
  return events.value
    .filter(e => e.date > today)
    .sort((a, b) => new Date(a.date) - new Date(b.date))
})

// 方法
function getTodayDate() {
  const today = new Date()
  return `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`
}

function getFutureDate(days) {
  const date = new Date()
  date.setDate(date.getDate() + days)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

function formatDate(dateStr) {
  const date = new Date(dateStr)
  return `${date.getMonth() + 1}月${date.getDate()}日`
}

function formatDay(dateStr) {
  return new Date(dateStr).getDate()
}

function formatMonth(dateStr) {
  return new Date(dateStr).getMonth() + 1 + '月'
}

function getCountdown(dateStr) {
  const targetDate = new Date(dateStr)
  const today = new Date()
  const diffTime = targetDate - today
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) return '今天'
  if (diffDays === 1) return '明天'
  if (diffDays === 2) return '后天'
  return `${diffDays}天后`
}

function getStatusText(status) {
  const statusMap = {
    upcoming: '即将到来',
    ongoing: '进行中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

function selectDate(date) {
  if (date) {
    selectedDate.value = date
  }
}

function prevMonth() {
  const date = new Date(selectedDate.value)
  date.setMonth(date.getMonth() - 1)
  selectedDate.value = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

function nextMonth() {
  const date = new Date(selectedDate.value)
  date.setMonth(date.getMonth() + 1)
  selectedDate.value = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

function handleDateSelect(e) {
  newEvent.value.date = `${e.year}-${e.month}-${e.day}`
}

function handleTimeSelect(e) {
  newEvent.value.time = `${e.hour}:${e.minute}`
}

function createEvent() {
  if (!newEvent.value.title || !newEvent.value.date || !newEvent.value.time) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }
  
  const event = {
    id: Date.now(),
    ...newEvent.value,
    status: 'upcoming'
  }
  
  events.value.push(event)
  newEvent.value = { title: '', description: '', date: '', time: '', type: 'date' }
  showCreateModal.value = false
  
  uni.showToast({
    title: '事件创建成功',
    icon: 'success'
  })
}

function showEventDetail(event) {
  uni.showModal({
    title: event.title,
    content: `${event.description}\n\n时间：${formatDate(event.date)} ${event.time}`,
    showCancel: false,
    confirmText: '知道了'
  })
}

function showAllEvents() {
  uni.showToast({
    title: '查看全部事件功能开发中',
    icon: 'none'
  })
}

onMounted(() => {
  // 可以加载保存的事件数据
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 1334rpx;
}

.create-section {
  margin-bottom: 20rpx;
}

.calendar-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .month-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
}
    
    .calendar-nav {
      display: flex;
       margin-right: 20rpx; &:last-child { margin-right: 0; }
    }
  }
  
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
     margin-right: 10rpx; &:last-child { margin-right: 0; }
    
    .weekday {
      text-align: center;
      font-size: 24rpx;
      color: #666;
      padding: 10rpx 0;
}
    
    .calendar-date {
      position: relative;
      text-align: center;
      padding: 20rpx 0;
      border-radius: 10rpx;
      
      &.today {
        background: #ff6b81;
        color: #fff;
}
      
      &.selected {
        border: 2rpx solid #ff6b81;
}
      
      &.hasEvent {
        .event-dot {
          position: absolute;
          bottom: 5rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 8rpx;
          height: 8rpx;
          background: #ff6b81;
          border-radius: 50%;
}
      }
      
      .date-text {
        font-size: 28rpx;
        font-weight: bold;
}
    }
  }
}

.events-section,
.upcoming-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
}
    
    .event-count,
    .section-more {
      font-size: 24rpx;
      color: #666;
}
  }
}

.events-list {
  .event-card {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    
    .event-time {
      background: #ff6b81;
      color: #fff;
      padding: 10rpx 15rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
      
      .time-text {
        font-size: 24rpx;
        font-weight: bold;
}
    }
    
    .event-content {
      flex: 1;
      
      .event-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 4rpx;
}
      
      .event-desc {
        font-size: 24rpx;
        color: #666;
}
    }
    
    .event-status {
      font-size: 24rpx;
      font-weight: bold;
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      
      &.upcoming {
        color: #ff6b81;
        background: rgba(255, 107, 129, 0.1);
}
      
      &.completed {
        color: #52c41a;
        background: rgba(82, 196, 26, 0.1);
}
    }
  }
}

.upcoming-list {
  .upcoming-card {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    
    .upcoming-date {
      background: #ff6b81;
      color: #fff;
      padding: 15rpx;
      border-radius: 15rpx;
      margin-right: 20rpx;
      text-align: center;
      min-width: 80rpx;
      
      .date-day {
        font-size: 32rpx;
        font-weight: bold;
        display: block;
}
      
      .date-month {
        font-size: 20rpx;
}
    }
    
    .upcoming-content {
      flex: 1;
      
      .upcoming-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 4rpx;
}
      
      .upcoming-time {
        font-size: 24rpx;
        color: #666;
}
    }
    
    .upcoming-countdown {
      background: #f0f0f0;
      color: #666;
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      
      .countdown-text {
        font-size: 24rpx;
}
    }
  }
}

.modal-content {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
}
  }
  
  .modal-form {
    margin-bottom: 30rpx;
}
  
  .modal-actions {
    display: flex;
    justify-content: space-between;
     margin-right: 20rpx; &:last-child { margin-right: 0; }
  }
}
</style>